<template>
	<div class="lottery">
		<!-- <scroller> -->
			<div class="lottery_first">
				<text class="lottery-style">数字彩</text>
				<div class="lottery_first_box" v-for="(item,index) in lotterylist" :key="index" @click="godetail(item)">
					<div class="lottery_first_info">
						<div class="lottery_first_info_fl">
							<text class="bigtitle">{{ item.lotteryNo | filterType}} </text>
							<text class="subtitle">第{{item.issue}}期</text>
						</div>
						<div class="lottery_first_info_fr">
							<text class="desc">{{item.drawTime | filtertime}}</text>
						</div>
					</div>
					<div class="lottery_first_ball">
						<div :class="[item.lottery_id==1 || item.lottery_id==2?'bGroup':'bGroup1']">
							<div class="betone-numbers-bGroup-forward" v-for="(item1,index) in item.forward" :key="index+1/4">
								<image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/redBall.png"></image>
								<text class="betone-numbers-bGroup-span-t">{{item1}}</text>
							</div>
							<div class="betone-numbers-bGroup-forward" v-for="(item1,index) in item.backward" :key="index+1/5">
								<image class="betone-numbers-bGroup-span" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/blueBall.png"></image>
								<text class="betone-numbers-bGroup-span-t">{{item1}}</text>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- </scroller> -->
	</div>
</template>

<script>
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import { customResponse } from "@/api.js";
import { serialize, getBaseUrl } from "@/utils/index.js";
import { debug } from "util";
import { lotteryTypes } from "@/js/global/index_data.js"

const modal = weex.requireModule("modal");
const navigator = weex.requireModule('navigator')

export default {
	data() {
		return {
			lotterylist: [],
			baseURL:""
		};
	},
  	filters: {
		filtertime(time) {
			let iarr = ['周日','周一','周二','周三','周四','周五','周六']
			let date = new Date(+time)
			
			let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }

			return `${ date.getFullYear() }-${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())} ${iarr[date.getDay()]}`
		},

		filterType(name) {
			return lotteryTypes[name].name
		}
	},

	
	created() {
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
		this.getresponsedata()
	},


	components: { 
		WxcMinibar
	},
	
	methods: {
		async getresponsedata(){

			let data = await customResponse({url:'lottery/history/lastDraw',  type:'GET',  header:{"Content-Type": "application/json;charset=utf-8"}})

			if( data.code === 0 ) {
				this.lotterylist = data.data.map((item)=>{
					let data = this.splitNum(item.drawNumber, item.drawNumber.indexOf('+') > -1 )
				
					if( item.drawNumber.indexOf('+') > -1 ) {
						item.forward = data[0]
						item.backward = data[1]
					} else {
						item.forward = data
						item.backward = []
					}

					return item
				})
			}
		},

		godetail(item) {
			var param = {
				id: lotteryTypes[item.lotteryNo].id,
				issue: item.issue,
				drawtime: item.drawTime,
				forward: item.forward.join(','),
				backward: item.backward.join(',') || '',
				prize: item.prize
			}

			navigator.push({
				'url': this.baseURL + 'views/drawLottery/lotto-detail.js?'+ serialize(param),
				'animated': 'true'
			})
		},

		splitNum(num, state) {
			return !!state ? [num.split('+')[0].split(','), num.split('+')[1].split(',') ] : num.split(',')
		}
	}
};
</script>
<style scoped>
.navbar-title {
  font-weight: bold;
  font-size: 34px;
  color: #fff;
}
.lottery {
  width:750px
}
.lottery_first {
  background-color: #ffffff;
  margin-bottom: 24px;
}
.lottery-style{
   background-color: #F5F5F5;
   padding:16px 0 16px 30px;
   font-size:28px;
   font-family:PingFangSC-Regular;
   color: #999;
}
.lottery_first_box {
  width: 750px;
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  height: 195px;
}
.lottery_first_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.lottery_first_info_fl {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 400px;
}
.lottery_first_info_fr {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 200px;
}
.bigtitle {
  font-size:32px;
  font-family:PingFangSC-Medium;
  color: #333333;
}
.subtitle {
  margin-left: 24px;
  font-size: 25px;
  color: #666666;
}
.desc {
  font-size: 24px;
  color: #a7a7a7;
}
.bGroup {
  padding: 24px 0 32px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.bGroup1{
  padding: 24px 0 32px 0;
  display: flex;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.forward {
  background-color: #e70d0d;
  color: #fff;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.forward1{
  background-color: #e70d0d;
  color: #fff;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-right: 34px;
}
.backward {
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 34px;
  background-color: #076bf2;
  color: #fff;
}
.betone-numbers-bGroup-forward {
   width: 64px;
   height: 64px;
   margin-right:15px;
   margin-left:15px;
   justify-content: center;
   align-items: center;
   align-self:center;
   position: relative;
}
.betone-numbers-bGroup-span-t {
  font-size: 32px;
  width:64px;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.betone-numbers-bGroup-span {
  height: 64px;
  width: 64px;
  position: absolute;
  top: 0;
  border-radius: 50px;
}
.lottery_second {
  background-color: white;
}
.lottery_second_title {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 43px;
}
.lottery_second_title_fl {
  margin-left: 32px;
}
.lottery_second_title_fl_desc {
  font-size: 32px;
  color: #333333;
}
.lottery_second_title_md {
  display: flex;
  flex-direction: row;
  margin-right: -80px;
}
.lottery_second_title_md_desc {
  font-size: 24px;
  color: #000000;
}
.lottery_second_title_fr {
  margin-right: 32px;
}
.lottery_second_title_rg {
  margin-right: 32px;
}
.lottery_second_title_rg_desc {
  font-size: 24px;
  color: #a7a7a7;
}
.vs {
  width: 40px;
  height: 40px;
}
.lottery_second_desc {
  padding: 32px 128px 32px 128px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.lottery_second_desc_box {
  position: relative;
  display: flex;
  flex-direction: row;
}
.lottery_second_desc_fl {
  align-items: center;
  border-radius: 50px;
  width: 249px;
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background-image: linear-gradient(to right, #11a4fa, #076bf2);
}
.lottery_second_desc_fr {
  align-items: center;
  border-radius: 50px;
  width: 249px;
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background-image: linear-gradient(to right, #f73f3f, #e20000);
}
.team {
  font-family: Helvetica-Bold;
  font-size: 30px;
  color: white;
}
.score {
  font-family: Impact;
  font-size: 32px;
  color: white;
}
.ballimg {
  width: 58px;
  height: 58px;
  position: absolute;
  top: 0px;
  left: 375px;
  margin-left: -29px;
}
.line {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}
</style>